<template>
	<view class="noticeCard">
		<view class="top">
			<view class="title">
				<u-tag class="tag" :text="noticeStatusName" shape="circle" :type="statusType" size="mini"></u-tag>
				{{noticeItem.title}}
			</view>
			<u-tag :text="typeName" shape="circle"></u-tag>
		</view>
		<view class="middle">{{noticeItem.content}}</view>
		<view class="bottom">
			<view>{{noticeItem.lastModifiedTime}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myNotice",
		props: {
			noticeItem: {},
		},
		data() {
			return {
				noticeStatusName: '',
				statusType: ''
			};
		},
		computed: {
			typeName() {
				// 1：系统消息 2：通知公告
				if (this.noticeItem.type == 1) {
					return "系统消息"
				} else if (this.noticeItem.type == 2) {
					return "通知公告"
				}
			},
			noticeStatus() {
				return this.noticeItem.status
			}
		},
		watch: {
			noticeStatus:{
				// 1 未读 2：已读
				handler(newVal, oldVal) {
						if (newVal == 1) {
							this.noticeStatusName = '未读'
							this.statusType = 'success'
						} else if (newVal == 2) {
							this.noticeStatusName = '已读'
							this.statusType = 'info'
						} else {
							this.noticeStatusName = '未读'
							this.statusType = 'info'
						}
					},
					immediate: true,


			},
		}
	}
</script>

<style lang="scss">
	.noticeCard {
		margin: 0 30rpx;
		border-bottom: solid #eeeeee 1px;
		padding: 5rpx 0;
		width: 710rpx;
	}

	.tag {
		margin-right: 10rpx;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0;

		.title {
			font-size: 30rpx;
		}
	}

	.middle {
		color: #666666;
	}

	.bottom {
		padding: 10rpx 0;
		font-size: 26rpx;
		color: #999999;
		display: flex;
		justify-content: flex-end;

	}
</style>
